<template>
  <div id="personalInfo">
    <h1 class="title">按照字段设置积分奖励</h1>
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="90px"
      >
        <el-row :gutter="20">
          <!--表头-->
          <div class="row-title">
            <el-col :span="10">字段名称</el-col>
            <el-col :span="14">积分规则</el-col>
          </div>
          <!--头像-->
          <el-col :span="10">头像</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="portrait"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.portrait"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--出生日期-->
          <el-col :span="10">出生日期</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="birthday"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.birthday"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--学习需求-->
          <el-col :span="10">学习需求</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="learningNeeds"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.learningNeeds"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--我的基础-->
          <el-col :span="10">我的基础</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="myBasics"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.myBasics"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--学历-->
          <el-col :span="10">学历</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="education"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.education"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--职业状态-->
          <el-col :span="10">职业状态</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="occupationState"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.occupationState"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--用户名-->
          <el-col :span="10">用户名</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="userName"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.userName"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--真实姓名-->
          <el-col :span="10">真实姓名</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="realName"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.realName"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--性别-->
          <el-col :span="10">性别</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="sex"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.sex"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--所在地区-->
          <el-col :span="10">所在地区</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="area"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.area"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--个性签名-->
          <el-col :span="10">个性签名</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="autograph"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.autograph"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--用途-->
          <el-col :span="10">用途</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="purpose"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.purpose"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'personalInfo',
  msg: '完善个人信息',
  data() {
    return {
      ruleForm: {
        portrait: 0, //头像
        birthday: 0, //出生日期
        learningNeeds: 0, //学习需求
        myBasics: 0, //我的基础
        education: 0, //学历
        occupationState: 0, //职业状态
        userName: 0, //用户名
        realName: 0, //真实姓名
        sex: 0, //性别
        area: 0, //所在地区
        autograph: 0, //个性签名
        purpose: 0 //用途
      },
      rules: {
        portrait: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        birthday: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        learningNeeds: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        myBasics: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        education: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        occupationState: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        userName: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        realName: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        sex: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        area: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        autograph: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        purpose: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        }
      }
    }
  },
  mounted() {},
  methods: {
    //表单赋值
    setForm(formData) {
      let { subtaskDTO } = formData
      if (subtaskDTO && subtaskDTO.length > 0) {
        subtaskDTO.forEach((item) => {
          let [key, value] = [item.toEdit, item.integralNumber]
          this.ruleForm[key] = value
        })
      }
    },
    //表单校验 & 数据提交
    checkForm() {
      this.$emit('setComRuleForm', this.ruleForm)
      let _this = this
      return new Promise((resolve, reject) => {
        _this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            resolve(true)
          } else {
            reject(false)
          }
        })
      })
    }
  }
}
</script>

<style lang="less">
#personalInfo {
  .el-row {
    padding-bottom: 10px;
    .el-col {
      height: 40px;
      line-height: 40px;
      color: #333;
      border-bottom: 1px solid #eee;
      &:nth-of-type(24),
      &:nth-of-type(25) {
        border-bottom: 0px;
      }
    }
    .row-title {
      background: #eee;
      height: 40px;
      margin-bottom: 6px;
    }
  }
  .el-input-number {
    margin: 0 6px;
  }
  .line {
    display: inline-block;
  }
  .el-form-item__error {
    position: initial;
    display: inline-block;
  }
}
</style>
